<template>
	<div class="box">
		<div class="box-box">
      <img class="img" :src="src" :alt="alt">
      <div class="describe">
        <span class="desc-title" v-text="title" :title="title" />
        <span class="desc-detail" v-text="text" :title="text" />
      </div>
      <div class="box-index" />
    </div>
    <p class="box-index-text">{{index}}</p>
    <!--  -->
	</div>
</template>

<script>
export default {
	props:{
		src:{
			type: String,
			required: true
		},
		alt:{
			default:'图片丢失'
		},
    index:{
      tyle:String|Number
    },
		text:{
			type: String,
			required: true
		},
    title:{
      type: String,
      default: '---------'
    }
	}
}
</script>

<style lang="less" scoped>
  @indexHeight1:30px;
  @indexHeight2:60px;
  .box{
    position: relative;
    &:hover .box-index-text{
      font-size: 28px;
      transform: translate(-30%, -30%) rotateY(360deg);
    }
    &:hover .box-index{
      height: @indexHeight2;
      width: @indexHeight2;
      left: calc(@indexHeight2 / 2 * -1);
      top: calc(@indexHeight2 / 2 * -1);
      border-radius: 50%;
      border: 10px double #0003;
    }
  }
  .box-index-text{
    position: absolute;
    top: 0;
    left: 0;
    font-size: 14px;
    transform: translate(-30%, -30%);
    fill-opacity: rule(3px);
    transition:all .5s;
  }
  .box-index{
    position: absolute;
    height: @indexHeight1;
    width: @indexHeight1;
    left: calc(@indexHeight1 / 2 * -1);
    top: calc(@indexHeight1 / 2 * -1);
    border: 4px solid #0001;
    background: #fff3;
    box-sizing: content-box;
    backdrop-filter: blur(3px);
    transition:all .5s;
  }
  .box-box{
    height: 100%;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 1px 2px 4px #0001;
    display: flex;
    border-radius: 6px;
    background-color: #ffe;
    align-items: center;
    position: relative;
  }
  .img{
    // height: 100%;
    // max-height: 64px;
    height: 64px;
    width: 64px;
    flex-shrink: 0;
    padding: 10px;
    object-fit: contain;
    float: left;
  }
  .describe{
    padding: 10px;
		width:calc(100% - 64px);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    span{
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .desc-title{
      color: #000;
      font-size: 16px;
      white-space: nowrap;
      // font-weight: 700;
    }
    .desc-detail{
      color: #0008;
      display: -webkit-box;
      white-space: pre-wrap;
      font-size: 14px;
      text-indent:1em;
      // 控制行数
      -webkit-line-clamp: 2;  
      -webkit-box-orient: vertical;
    }
  }
</style>
